<template>
  <div>
    <div class="top-card">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card style="color: #409eff;">
            <div>学生总人数</div>
            <div style="text-align: center">{{this.xszrs}}</div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card style="color: #f34f4f;">
            <div>实习未开始</div>
            <div style="text-align: center">{{this.sxwks}}</div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card style="color: #d6a240;">
            <div>实习进行中</div>
            <div style="text-align: center">{{this.sxjxz}}</div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card style="color: #67c23a;">
            <div>实习已结束</div>
            <div style="text-align: center">{{this.sxyjs}}</div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="center-card">
      <el-row>
        <el-col :span="24">
          <el-card>
            <div id="xyfb" style="height: 400px;"></div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="buttom-card">
      <el-row>
        <el-col :span="24">
          <el-card>
            <div id="fsfb" style="height: 240px;"></div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {getEchartsData} from "@/api/echarts";
export default {
  name: "Index",
  data() {
    return {
      deptNameList: [],
      deptStudentCountList: [],
      xszrs: 0,
      sxwks: 0,
      sxjxz: 0,
      sxyjs: 0,
      sxfsList: [],
      excellentCount: 0,
      goodCount: 0,
      badCount: 0
    }
  },
  mounted() {
    this.getData()
    setTimeout(() => {
      this.getXyfb()
      this.getfsfb()
    }, 400)
  },
  methods: {
    getData(){
      getEchartsData().then(res => {
        this.deptNameList = res.deptNameList
        this.deptStudentCountList = res.deptStudentCountList
        this.xszrs = res.xszrs
        this.sxwks = res.sxwks
        this.sxjxz = res.sxjxz
        this.sxyjs = res.sxyjs
        this.excellentCount = res.excellentCount
        this.goodCount = res.goodCount
        this.badCount = res.badCount
      })
    },
    getXyfb(){
      const chartDom = document.getElementById('xyfb');
      const myChart = echarts.init(chartDom);
      const option = {
        grid: {
          top: 50, // 调整顶部间距，确保标题不被遮挡
          left: 50, // 调整左侧间距，确保标签不被遮挡
          right: 30, // 调整右侧间距，确保标签不被遮挡
          bottom: 100 // 调整底部间距，确保标签不被遮挡
        },
        title: {
          text: '学生学院分布',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          data: this.deptNameList,
          axisLabel: {
            interval: 0,
            rotate: 45,
            fontSize: 12, // 适当缩小字体，减少占用空间
             // 标签对齐方式
            verticalAlign: 'top' ,// 垂直对齐（旋转后避免偏移）
            fontWeight: 'bold' // 加粗字体
          },
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.deptStudentCountList,
            type: 'bar'
          }
        ]
      };
      option && myChart.setOption(option);
    },
    getfsfb(){
      const chartDom = document.getElementById('fsfb');
      const myChart = echarts.init(chartDom);
      const option = {
        title: {
          text: '学生实习成绩',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data: [
              {value: this.excellentCount, name: '优(90-100)分'},
              {value: this.goodCount, name: '良(60-89)分'},
              {value: this.badCount, name: '差(0-59)分'}
            ],
            label: {
              formatter: '{b} ({d}%)'
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      option && myChart.setOption(option);
    }
  }
}

</script>

<style scoped lang="scss">
.top-card{
  padding: 10px;
}
.top-card .el-card {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 800;
}
.center-card{
  padding: 0 10px;
}
.buttom-card{
  padding: 10px;
}
</style>

